<html>
	<head>
		<link data-turbolinks-track="true" href="lungo.css" media="all" rel="stylesheet">
		<link data-turbolinks-track="true" href="lungo.icon.css" media="all" rel="stylesheet">
		<link data-turbolinks-track="true" href="lungo.theme.css" media="all" rel="stylesheet">
		<script data-turbolinks-track="true" src="quo.js"></script>
		<script data-turbolinks-track="true" src="lungo.js"></script>
	</head>
	<body>
		<aside id="features">
		    <header data-title="Options"></header>
		    <article class="active">
		        <article id="icon-toolbar" class="active list ">
					    <ul>
					        <li class="anchor theme">Text</li>
					        <li >

					            <strong>font</strong>
					            <small>class .font</small>
					        </li>
					        <li >
					            <strong>bold</strong>
					            <small>class .bold</small>
					        </li>
					        <li >
					            <strong>italic</strong>
					            <small>class .italic</small>
					        </li>
					        </article>
		    </article>
		</aside>
		<section id="loader" data-transition="">
		    <header data-title="example">
		    	 <nav>
            <button data-view-aside="features" data-icon="menu"></button>
        </nav>
		    </header>
		    <article id="main-article" class="">
		        {{CONTENT}}
		    </article>
		    <article id="icon-toolbar" class="active list scroll">
			    <ul>
			        <li class="anchor theme">Text</li>
			        <li class='thumb big'>
			        		<img src="http://cdn.tapquo.com/lungo/icon-144.png" />
							    <div>
							        <div class="on-right text tiny">lorem ipsum</div>
							        <strong>Title</strong>
							        <span class="text tiny opacity">lorem ipsum</span>
							        <small>
							            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, aliquam, nisi commodi blanditiis.
							        </small>
							    </div>
			        </li>
			        <li class='thumb big'>
			        		<img src="http://cdn.tapquo.com/lungo/icon-144.png" />
							    <div>
							        <div class="on-right text tiny">lorem ipsum</div>
							        <strong>Title</strong>
							        <span class="text tiny opacity">lorem ipsum</span>
							        <small>
							            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, aliquam, nisi commodi blanditiis.
							        </small>
							    </div>
			        </li>
			        <li data-icon="italic">
			            <strong>italic</strong>
			            <small>class .italic</small>
			        </li>
			        <li data-icon="strikethrough">
			            <strong>strikethrough</strong>
			            <small>class .strikethrough</small>
			        </li>
			        <li data-icon="underline">
			            <strong>underline</strong>
			            <small>class .underline</small>
			        </li>
			        <li data-icon="text-height">
			            <strong>text-height</strong>
			            <small>class .text-height</small>
			        </li>
			        <li data-icon="text-width">
			            <strong>text-width</strong>
			            <small>class .text-width</small>
			        </li>
			        <li data-icon="adjust">
			            <strong>adjust</strong>
			            <small>class .adjust</small>
			        </li>
			        <li data-icon="tint">
			            <strong>tint</strong>
			            <small>class .tint</small>
			        </li>


			        <li class="anchor theme">Alignment</li>
			        <li data-icon="align-left">
			            <strong>align-left</strong>
			            <small>class .align-left</small>
			        </li>
			        <li data-icon="align-right">
			            <strong>align-right</strong>
			            <small>class .align-right</small>
			        </li>
			        <li data-icon="align-justify">
			            <strong>align-justify</strong>
			            <small>class .align-justify</small>
			        </li>
			        <li data-icon="indent-left">
			            <strong>indent-left</strong>
			            <small>class .indent-left</small>
			        </li>
			        <li data-icon="indent-right">
			            <strong>indent-right</strong>
			            <small>class .indent-right</small>
			        </li>


			        <li class="anchor theme">Elements</li>
			        <li data-icon="menu">
			            <strong>menu</strong>
			            <small>class .menu</small>
			        </li>
			        <li data-icon="grid">
			            <strong>grid</strong>
			            <small>class .grid</small>
			        </li>
			        <li data-icon="grid-large">
			            <strong>grid-large</strong>
			            <small>class .grid-large</small>
			        </li>
			        <li data-icon="list">
			            <strong>list</strong>
			            <small>class .list</small>
			        </li>
			        <li data-icon="list-th">
			            <strong>list-th</strong>
			            <small>class .list-th</small>
			        </li>
			        <li data-icon="list-ul">
			            <strong>list-ul</strong>
			            <small>class .list-ul</small>
			        </li>
			        <li data-icon="list-ol">
			            <strong>list-ol</strong>
			            <small>class .list-ol</small>
			        </li>
			        <li data-icon="list-alt">
			            <strong>list-alt</strong>
			            <small>class .list-alt</small>
			        </li>
			        <li data-icon="table">
			            <strong>table</strong>
			            <small>class .table</small>
			        </li>
			        <li data-icon="bar-chart">
			            <strong>bar-chart</strong>
			            <small>class .bar-chart</small>
			        </li>
			        <li data-icon="tasks">
			            <strong>tasks</strong>
			            <small>class .tasks</small>
			        </li>
			        <li data-icon="paper-clip">
			            <strong>paper-clip</strong>
			            <small>class .paper-clip</small>
			        </li>
			        <li data-icon="link">
			            <strong>link</strong>
			            <small>class .link</small>
			        </li>
			        <li data-icon="quote-left">
			            <strong>quote-left</strong>
			            <small>class .quote-left</small>
			        </li>
			        <li data-icon="quote-right">
			            <strong>quote-right</strong>
			            <small>class .quote-right</small>
			        </li>


			        <li class="anchor theme">View & Size</li>
			        <li data-icon="zoom-in">
			            <strong>zoom-in</strong>
			            <small>class .zoom-in</small>
			        </li>
			        <li data-icon="zoom-out">
			            <strong>zoom-out</strong>
			            <small>class .zoom-out</small>
			        </li>
			        <li data-icon="fullscreen">
			            <strong>fullscreen</strong>
			            <small>class .fullscreen</small>
			        </li>
			        <li data-icon="resize-full">
			            <strong>resize-full</strong>
			            <small>class .resize-full</small>
			        </li>
			        <li data-icon="resize-small">
			            <strong>resize-small</strong>
			            <small>class .resize-small</small>
			        </li>
			        <li data-icon="resize-vertical">
			            <strong>resize-vertical</strong>
			            <small>class .resize-vertical</small>
			        </li>
			        <li data-icon="resize-horizontal">
			            <strong>resize-horizontal</strong>
			            <small>class .resize-horizontal</small>
			        </li>


			        <li class="anchor theme">Editor</li>
			        <li data-icon="pencil">
			            <strong>pencil</strong>
			            <small>class .pencil</small>
			        </li>
			        <li data-icon="search">
			            <strong>search</strong>
			            <small>class .search</small>
			        </li>
			        <li data-icon="filter">
			            <strong>filter</strong>
			            <small>class .filter</small>
			        </li>
			        <li data-icon="trash">
			            <strong>trash</strong>
			            <small>class .trash</small>
			        </li>
			        <li data-icon="file">
			            <strong>file</strong>
			            <small>class .file</small>
			        </li>
			        <li data-icon="file-alt">
			            <strong>file-alt</strong>
			            <small>class .file-alt</small>
			        </li>
			        <li data-icon="folder-close">
			            <strong>folder-close</strong>
			            <small>class .folder-close</small>
			        </li>
			        <li data-icon="folder-close-alt">
			            <strong>folder-close-alt</strong>
			            <small>class .folder-close-alt</small>
			        </li>
			        <li data-icon="folder-open">
			            <strong>folder-open</strong>
			            <small>class .folder-open</small>
			        </li>
			        <li data-icon="folder-open-alt">
			            <strong>folder-open-alt</strong>
			            <small>class .folder-open-alt</small>
			        </li>
			        <li data-icon="cut">
			            <strong>cut</strong>
			            <small>class .cut</small>
			        </li>
			        <li data-icon="copy">
			            <strong>copy</strong>
			            <small>class .copy</small>
			        </li>
			        <li data-icon="paste">
			            <strong>paste</strong>
			            <small>class .paste</small>
			        </li>
			        <li data-icon="save">
			            <strong>save</strong>
			            <small>class .save</small>
			        </li>
			        <li data-icon="undo">
			            <strong>undo</strong>
			            <small>class .undo</small>
			        </li>
			        <li data-icon="repeat">
			            <strong>repeat</strong>
			            <small>class .repeat</small>
			        </li>
			        <li data-icon="refresh">
			            <strong>refresh</strong>
			            <small>class .refresh</small>
			        </li>
			        <li data-icon="magic">
			            <strong>magic</strong>
			            <small>class .magic</small>
			        </li>


			        <li class="anchor theme">Others</li>
			        <li data-icon="bookmark">
			            <strong>bookmark</strong>
			            <small>class .bookmark</small>
			        </li>
			        <li data-icon="bookmark-empty">
			            <strong>bookmark-empty</strong>
			            <small>class .bookmark-empty</small>
			        </li>
			        <li data-icon="check">
			            <strong>check</strong>
			            <small>class .check</small>
			        </li>
			        <li data-icon="check-empty">
			            <strong>check-empty</strong>
			            <small>class .check-empty</small>
			        </li>
			        <li data-icon="tag">
			            <strong>tag</strong>
			            <small>class .tag</small>
			        </li>
			        <li data-icon="tags">
			            <strong>tags</strong>
			            <small>class .tags</small>
			        </li>
			        <li data-icon="edit">
			            <strong>edit</strong>
			            <small>class .edit</small>
			        </li>
			        <li data-icon="share">
			            <strong>share</strong>
			            <small>class .share</small>
			        </li>
			        <li data-icon="external-link">
			            <strong>external-link</strong>
			            <small>class .external-link</small>
			        </li>
			    </ul>
			</article>

		    <footer>
		        <nav>
		            <a href="#" data-icon="menu" class="active"></a>
		            <a href="#" data-icon="share"></a>
		            <a href="#" data-icon="user"></a>
		            <a href="#" data-icon="users"></a>
		        </nav>
		    </footer>
		</section>
	</body>
	<script>
		Lungo.init({
		    name: 'example',
		    resources: ['section_to_load.html']
		});
	</script>
</html>